<!DOCTYPE html>
<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include.jsp"%>
<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Welcome</title>
<meta name="description" content="" /> 

<link rel="stylesheet" type="text/css" href="../css/config.css" />
<link rel="stylesheet" type="text/css" href="../css/imgareaselect-default.css" />

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/jquery.validate.others.js"></script>
 <!-- 
<script type="text/javascript" src="../scripts/jquery.min.js"></script>  -->
<script type="text/javascript" src="../scripts/jquery.imgareaselect.pack.js"></script>
 
<script type="text/javascript"> 
$(function(){
    $('#form').validate({
        rules :{
        	HMinGrid : {
            	required	: true,
            	number 		: true,
            	min 		: 0,
            	max 		: 360
            },
            HMaxGrid : {
            	required 	: true,
            	number 		: true,
            	min 		: 0,
            	max 		: 360
            },
            SMinGrid : {
            	required	: true,
            	number 		: true,
            	min 		: 0,
            	max 		: 100
            },
            SMaxGrid : {
            	required 	: true,
            	number 		: true,
            	min 		: 0,
            	max 		: 100
            },
            VMinGrid : {
            	required	: true,
            	number 		: true,
            	min 		: 0,
            	max 		: 100
            },
            VMaxGrid : {
            	required 	: true,
            	number 		: true,
            	min 		: 0,
            	max 		: 100
            }
        },
        messages : {
        	HMinGrid : {
            	required 	: "<spring:message code="errorRequired" />",
            	number 		: "<spring:message code="errorNumber" 	/>",
            	min 		: "<spring:message code="errorMin" arguments="0" 	/>",
            	max 		: "<spring:message code="errorMin" arguments="360" 	/>"
            },
            HMaxGrid : {
            	required 	: "<spring:message code="errorRequired" />",
            	number 		: "<spring:message code="errorNumber" 	/>",
            	min 		: "<spring:message code="errorMin" arguments="0" 	/>",
            	max 		: "<spring:message code="errorMin" arguments="360" 	/>"
            },
            SMinGrid : {
            	required 	: "<spring:message code="errorRequired" />",
            	number 		: "<spring:message code="errorNumber" 	/>",
            	min 		: "<spring:message code="errorMin" arguments="0" 	/>",
            	max 		: "<spring:message code="errorMin" arguments="100" 	/>"
            },
            SMaxGrid : {
            	required 	: "<spring:message code="errorRequired" />",
            	number 		: "<spring:message code="errorNumber" 	/>",
            	min 		: "<spring:message code="errorMin" arguments="0" 	/>",
            	max 		: "<spring:message code="errorMin" arguments="100" 	/>"
            },
            VMinGrid : {
            	required 	: "<spring:message code="errorRequired" />",
            	number 		: "<spring:message code="errorNumber" 	/>",
            	min 		: "<spring:message code="errorMin" arguments="0" 	/>",
            	max 		: "<spring:message code="errorMin" arguments="100" 	/>"
            },
            VMaxGrid : {
            	required 	: "<spring:message code="errorRequired" />",
            	number 		: "<spring:message code="errorNumber" 	/>",
            	min 		: "<spring:message code="errorMin" arguments="0" 	/>",
            	max 		: "<spring:message code="errorMin" arguments="100" 	/>"
            }
        },
        submitHandler: function(form){
            form.submit();
        }
    }); 
});

function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
    
    $('#photo + div > img').css({
        width: Math.round(scaleX * img.width) + 'px',
        height: Math.round(scaleY * img.height) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'

    });

}
$(function () {
	$('<div><img  id="selectionImg" path="selectionImg" src="<%=session.getAttribute("uploadFile")%>"  style="position: relative;" /><div>')
    .css({
    	float: 'left',
        position: 'relative',
        overflow: 'hidden',
        width: '100px',
        height: '100px'
    })
    .insertAfter($('#photo'));
	
	$('#photo').imgAreaSelect({
		handles: true, 
		onSelectChange: preview, 
        onSelectEnd: function ( image, selection ) {
            $('input[name=x1]').val(selection.x1); 
            $('input[name=y1]').val(selection.y1); 
            $('input[name=x2]').val(selection.x2); 
            $('input[name=y2]').val(selection.y2);
            $('input[name=w]').val(selection.width);
            $('input[name=h]').val(selection.height);  
        }  
	});
});
</script>

<!-- 
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
	$(function() {
		$('#coolMenu').find('> li').hover(
				function() {
					$(this).find('ul').removeClass('noJS').stop(true, true)
							.slideToggle('fast');
				});
	});
	
</script>
 -->
</head>
<body>
	<jsp:include page="/WEB-INF/views/menu.jsp" />   
	<form:form modelAttribute="gridAndBackground" id="form" name="form" method="post">
		<input type="hidden" name="x1" value="" />
	    <input type="hidden" name="y1" value="" />
	    <input type="hidden" name="x2" value="" />
	    <input type="hidden" name="y2" value="" />
	    <input type="hidden" name="w" value="" />
	    <input type="hidden" name="h" value="" />
		<table>	
			<tr>
				<td>
					<fieldset>
					<legend><spring:message code="gridAndBackground"/></legend>
					<fieldset>
								<legend><spring:message code="grid"/></legend>
						<div>
							<fieldset>
								<legend><spring:message code="H"/></legend>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<form:label for="HMinGrid" path="HMinGrid"><spring:message code="min"/></form:label>
									<form:input path="HMinGrid" id="HMinGrid" name="HMinGrid" size="3" maxlength="3"/>
									<form:errors path="HMinGrid" cssClass="error" />
									&nbsp;&nbsp;&nbsp;
									<form:label for="HMaxGrid" path="HMaxGrid"><spring:message code="max"/></form:label>
									<form:input path="HMaxGrid" id="HMaxGrid" name="HMaxGrid" size="3" maxlength="3"/>
									<form:errors path="HMaxGrid" cssClass="error" />
							</fieldset>
						</div>
						<div>
							<fieldset>
								<legend><spring:message code="S"/></legend>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<form:label for="SMinGrid" path="SMinGrid"><spring:message code="min"/></form:label>
									<form:input path="SMinGrid" id="SMinGrid" name="SMinGrid" size="3" maxlength="3"/>
									&nbsp;&nbsp;&nbsp;
									<form:label for="SMaxGrid" path="SMaxGrid"><spring:message code="max"/></form:label>
									<form:input path="SMaxGrid" id="SMaxGrid" name="SMaxGrid" size="3" maxlength="3"/>
							</fieldset>
						</div>
						<div>
							<fieldset>
								<legend><spring:message code="V"/></legend>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<form:label for="VMinGrid" path="VMinGrid"><spring:message code="min"/></form:label>
									<form:input path="VMinGrid" id="VMinGrid" name="VMinGrid" size="3" maxlength="3"/>
									&nbsp;&nbsp;&nbsp;
									<form:label for="VMaxGrid" path="VMaxGrid"><spring:message code="max"/></form:label>
									<form:input path="VMaxGrid" id="VMaxGrid" name="VMaxGrid" size="3" maxlength="3"/>
							</fieldset>
						</div>
						</fieldset>
						<fieldset>
								<legend><spring:message code="background"/></legend>
						<div>
							<fieldset>
								<legend><spring:message code="H"/></legend>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<form:label for="HMinBackground" path="HMinBackground"><spring:message code="min"/></form:label>
									<form:input path="HMinBackground" id="HMinBackground" name="HMinBackground" size="3" maxlength="3"/>
									<form:errors path="HMinBackground" cssClass="error" />
									&nbsp;&nbsp;&nbsp;
									<form:label for="HMaxBackground" path="HMaxBackground"><spring:message code="max"/></form:label>
									<form:input path="HMaxBackground" id="HMaxBackground" name="HMaxBackground" size="3" maxlength="3"/>
									<form:errors path="HMaxBackground" cssClass="error" />
							</fieldset>
						</div>
						<div>
							<fieldset>
								<legend><spring:message code="S"/></legend>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<form:label for="SMinBackground" path="SMinBackground"><spring:message code="min"/></form:label>
									<form:input path="SMinBackground" id="SMinBackground" name="SMinBackground" size="3" maxlength="3"/>
									&nbsp;&nbsp;&nbsp;
									<form:label for="SMaxBackground" path="SMaxBackground"><spring:message code="max"/></form:label>
									<form:input path="SMaxBackground" id="SMaxBackground" name="SMaxBackground" size="3" maxlength="3"/>
							</fieldset>
						</div>
						<div>
							<fieldset>
								<legend><spring:message code="V"/></legend>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<form:label for="VMinBackground" path="VMinBackground"><spring:message code="min"/></form:label>
									<form:input path="VMinBackground" id="VMinBackground" name="VMinBackground" size="3" maxlength="3"/>
									&nbsp;&nbsp;&nbsp;
									<form:label for="VMaxBackground" path="VMaxBackground"><spring:message code="max"/></form:label>
									<form:input path="VMaxBackground" id="VMaxBackground" name="VMaxBackground" size="3" maxlength="3"/>
							</fieldset>
						</div>
						</fieldset>
						<div  id="fondo"></div>
						<div>
							<br>
							<input type="submit" value="<spring:message code="selectFromImage"/>" id="selectFromImage" name="selectFromImage"/>
							<br><br>
							<input type="submit" value="<spring:message code="restore"/>" id="restoreBackground" name="restoreBackground"/>		
							<input type="submit" value="<spring:message code="delete"/>" id="deleteBackground" name="deleteBackground"/>
							<input type="submit" value="<spring:message code="save"/>" id="saveBackground" name="saveBackground"/>
						</div>
					</fieldset>
				</td>
				<td>
					<br>
					<br>
					<%
						if (session.getAttribute("uploadFile") != null
								&& !(session.getAttribute("uploadFile")).equals("")) {
					%>
						<div><!--  style="height: 600px; width: 600px; overflow: scroll;" -->
							<img id="photo"  src="<%=session.getAttribute("uploadFile")%>"
							alt="Imagen a clasificar <%=session.getAttribute("uploadFile")%> " />
						</div>
					<%
						}
					%>
				</td>
			</tr>		
		</table>
	</form:form>
</body>
</html>